<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
		<style>
			.aui-nav {
				height: 40px;
			}
			.aui-nav span {
				padding: 5px;
				font-size: 20px;
			}
			.aui-nav span:first-child {
				padding-left: 20px;
			}
			.aui-nav span:last-child {
				padding-right: 20px;
				float: right;
			}
		</style>
	</head>
	<body>
		<header id="panel_header" class="aui-bar aui-bar-nav aui-bar-pro">
			<a onclick="systemBack();" class="aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<span class="aui-title">底部弹出菜单</span>
		</header>
		<footer class="aui-nav" id="panel_footer">
			<span tapmode="aui-text-pro" class="aui-iconfont aui-icon-like"></span>
			<span onclick="camera();" tapmode="aui-text-pro" class="aui-iconfont aui-icon-camera"></span>
			<span onclick="share();" tapmode="aui-text-pro" class="aui-iconfont aui-icon-share"></span>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/aui-eg.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var header = $api.byId('panel_header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var footer = $api.byId('panel_footer');
			var footerPos = $api.offset(footer);
			api.openFrame({
				name : 'main',
				url : 'modal_footer_frm.html',
				bounces : false,
				rect : {
					x : 0,
					y : headerPos.h,
					w : "auto",
					h : api.winHeight - headerPos.h - footerPos.h
				}
			});
			api.parseTapmode();
		};
		function systemBack() {
			api.closeWin();
		}
		function camera(){
			var header = $api.byId('panel_header');
			var headerPos = $api.offset(header);
			$aui.topMenu({
				modalOpacity : "0.2",
				x : 100/2,
				y : api.winHeight - 140,
				w : api.winWidth - 100,
				h : 200,
				point : "off",
				pointX : 90,
				pointW : 10,
				pointH : 10,
				menuBgColor : "rgba(255,255,255,0.8)",
				menuRadius : "5",
				textColor : "#15B5E9",
				activeColor : "#f00",
				activeBgColor : "rgba(255,255,255,0.0)",
				textAlign : "center",
				textSize : 16,
				textData : [
					"照相机","相册","-","取消"
				],
				lineColor : "#4c4c4c",
				textDefault : "取消"
			}, function(index) {
				if(index != "-1"){
					alert(index);
				}
			});
		}
		
		function share() {
			$aui.bottomMenu({
				modalOpacity : "0.2",
				menuBgColor : "rgba(255,255,255,1.0)",
				menuRadius : "0",
				textColor : "#333333",
				textSize : "16",
				textData : [{
					"title" : "微信好友",
					"icon" : "weixin",
					"color" : "#79c141"
				}, {
					"title" : "微信朋友圈",
					"icon" : "pengyouquan",
					"color" : "#ff9e00"
				}, {
					"title" : "新浪微博",
					"icon" : "weibo",
					"color" : "#f85357"
				}, {
					"title" : "QQ",
					"icon" : "QQ",
					"color" : "#339ee6"
				}, {
					"title" : "支付宝好友",
					"icon" : "zhifubao",
					"color" : "#00a0e9"
				}, {
					"title" : "复制链接",
					"icon" : "lianjie",
					"color" : "#5298dd"
				}],
				lineColor : "#E7E7E7"
			}, function(data) {
				if (data != "-1") {
					alert(data);
				}
			});
		}
	</script>
</html>